<template>
	<view class="descBox top-10">
		<view class="titleCom flex col-3e">
			<view class="leftTitle">
                <view class="titBox">
                    <text class="title fontBold txtHidden">{{detail.title}}</text>
                </view>
                <view class="addressBox flex top-10" @click="toAddress">
                    <u-icon name="map-fill" color="#007235" size="14"></u-icon>
                    <text class="address font13 txtHidden">{{detail.area}}-{{detail.address}}</text>
                    <u-icon name="arrow-right" color="#3E3A3A" size="14"></u-icon>
                </view>
			</view>
			<view class="rightStatus">
                <button class="remindBox clearBtn" @click="clickSubscribe">
                    <view class="iconBox flex">
                        <view class="subscribeIcon bg" :class="subscribe?'subscribed':'unSubscribe'"></view>
                        <!-- <u-icon :name="subscribe?'bookmark-fill':'bookmark'" color="#007235" size="25"></u-icon> -->

                        <view class="subBtnBox font12 top-5" :class="subscribe?'col-grey':''">
                            {{subscribe?'已订阅':'订阅楼盘'}}
                        </view>
                    </view>
                </button>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'pinia';
    import { useUserInfoStore } from '@/store/index';
    import { updateUserInfo } from '@/common/common';
    import { doSubscribe } from "@/common/api";
	export default {
        data() {
            return {
            }
        },
		props:{
			detail: {
				type: Object,
				default: () => ({})
			},
            subscribe: {
                type: Boolean,
                default: false
            },
            subscribeCount: {
                type: Number,
                default: 0
            },
            gzhkfUrl:{
                type: String,
                default: ''
            }
		},
		computed:{
			...mapState(useUserInfoStore, ['userInfo'])
		},
		methods:{
			//点击订阅
			async clickSubscribe(){
                try {
                    await updateUserInfo();
                }catch(err) {}
                
				this.$emit('clickSubs')
			},

            /**
             * 授权请求
             * @param {Boolean} subscribe true订阅、false取消订阅
             * @param {String} phone 
             * @param {Boolean} shouquan true授权、false不授权
            */
            async postSubsAuth(subscribe=false, phone, shouquan) {
                try {
                    let { status, detail } = await doSubscribe({
                        productId: this.detail.id,
                        shouquan,
                        phone
                    })
                    if(status === 0) {
                        if(!subscribe) {
                            if(!useUserInfoStore.userInfo.wx_subscribe && this.gzhkfUrl) {
                                let url = encodeURIComponent(this.gzhkfUrl);
                                uni.navigateTo({
                                	url: `/pages/product/article/detail/index?url=${url}&productId=${this.detail.id}&title=关注服务号二维码&prepage=楼盘详情页-${this.detail.id}`
                                })
                            }

                            if(shouquan) {
                                await updateUserInfo();
                            }
                        }

                        //更新订阅
                        // this.$emit('update');
                    }else {
                        uni.$u.toast(detail);
                    }
                } catch (error) {}
            },
			
			//跳转地图
			toAddress(){
			  if(this.detail.lat > 0 && this.detail.lng > 0){
			       uni.openLocation({
			         latitude: this.detail.lat,
			         longitude: this.detail.lng,
			         success: function () {
			         }
			       });
			    }
			}
		}
	}
</script>

<style scoped lang="scss">
	.descBox{
        line-height: 1;
        position: relative;
		.titleCom{
            padding: 0rpx 22rpx;
            justify-content: space-between;
            align-items: flex-start;
		}
		.leftTitle{
            width: calc(100% - 150rpx);
            .titBox{
                .title{
                	font-size: 42rpx;
                	line-height: 1.2;
                }
            }
			.addressBox{
                justify-content: flex-start;
                .address{
                    max-width: calc(100% - 80rpx);
                    margin-left: 10rpx;
                    margin-right: 25rpx;
                }
            }
		}
		.rightStatus{
			.remindBox{
                line-height: 1;
                border-radius: 0;
                .iconBox{
                    flex-direction: column;
                    .subscribeIcon{
                        width: 40rpx;
                        height: 50rpx;
                    }
                    .subscribed{
                        background-image: url('https://image.srea.org.cn/xcx/icon/icon-detail-product-subscribe-active.png');
                    }
                    .unSubscribe{
                        background-image: url('https://image.srea.org.cn/xcx/icon/icon-detail-product-subscribe-default.png');
                    }
                    .subBtnBox{
                        min-width: 4em;
                    }
                }
			}
		}
	}
</style>
